<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax二级规范</title>
</head>
<body>
    <script>
        /*
        XMLHttpRequest 2级规范  load、error、progress、timeout
        */

        var xhr = new XMLHttpRequest();
        xhr.timeout = 6000;
        xhr.ontimeout = function () {
            console.log('超时啦');
        }

        xhr.onload = function () {
            console.log('请求成功', xhr.responseText);
        }

        xhr.onerror = function () {
            if (xhr.status == 404) {
                console.log('url地址报错');
            } else if (xhr.status == 400) {
                console.log('请求参数报错');
            } else if (xhr.status == 500) {
                console.log('后台代码有问题');
            } else {
                console.log('请求失败，未知原因');
            }
        }

        xhr.onprogress = function () {
            // event.lengthComputable = true; // 长度是否可计算
            // event.loaded 表示当前请求进度，请求到的内容大小
            // event.total  全部需要请求的内容大小
            console.log(event.loaded, event.total);
            console.log('当前进度为', event.loaded / event.total * 100 + '%');
        }

        xhr.open('POST', 'http://bufantec.com/api/test/user/save');
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send('name=libai');
    </script>
</body>
</html>